<template>
  <view>
    <view class="code-flex-col page">
      <view class="code-flex-col code-flex-1 group_5">
        <view class="code-flex-col code-relative group">
          <view class="code-flex-row">
            <image :src="getPicture(activityDetails.actPhoto)" class="image_3" />
            <view class="flex flex-col justify-between ml-[20rpx]">
              <view class="code-flex-col group_2">
                <text class="code-self-stretch font_2">
                  {{ activityDetails.actName }}
                  <br />
                </text>
              </view>
              <view>
                <view class="code-self-start font_6 text-[#171726]">
                  {{ formattedDate(activityDetails.actStartTime) }}-{{ formattedDate(activityDetails.actEndTime) }}
                </view>
                <text class="code-self-start font_6">{{ activityDetails.actSite }}</text>
              </view>
            </view>
          </view>
          <view class="code-flex-col group_6">
            <view class="code-flex-row flex items-center justify-between">
              <view>
                <text class="font_5 text_5">实名观影人</text>
                <text class="font_6 text_6 ml-3">仅需选择{{ activityModify.size }}位；入场需携带对应证件</text>
              </view>
              <view
                class="border border-gray-200 text-blue-500 pl-3 pr-3 pt-1 pb-1 rounded-xl text-xs"
                @tap="routerPath"
              >
                新增
              </view>
            </view>
            <view
              v-for="(item, index) in activityModify.moviegoerList"
              :key="index"
              class="code-mt-16 code-flex-row code-justify-between code-items-center"
            >
              <view class="code-flex-col">
                <text class="code-self-start font_7">{{ item.actVieuserName }}</text>
                <view class="code-flex-row code-items-baseline code-self-stretch mt-13">
                  <text class="font_4">身份证</text>
                  <text class="font_4 ml-5">{{ item.actVieuserIdentity }}</text>
                </view>
              </view>
              <view class="section"></view>
            </view>
          </view>
          <view class="code-flex-col code-items-start group_7">
            <text class="font_5 text_7">配送方式</text>
            <text class="code-mt-14 font_7 text_8">{{ activityDetails.activityServeVo.buyTicketType_dictText }}</text>
            <text class="code-mt-14 font_6 text_9">{{ activityDetails.activityServeVo.buyTicketInfo }}</text>
          </view>
          <view class="code-flex-col group_8">
            <text class="code-self-start font_5 text_10">联系人</text>
            <text class="code-self-start font_7 mt-17">{{ user.userNickname }}</text>
            <view class="code-flex-row code-items-center code-self-stretch mt-17">
              <text class="text_11">+86</text>
              <image
                class="image_4 ml-11"
                src="https://ide.code.fun/api/image?token=658a8497bddbb70011853f9f&name=808e9160cc9173b21a869ca7851013a0.png"
              />
              <text class="font_7 text_12 ml-11">{{ user.userPhone }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 支付-->
      <MyCard :is-box-shadow="false" :is-radius="false" padding="0 40rpx">
        <u-radio-group v-model="paymentNum" iconPlacement="right" placement="column">
          <view v-for="(item, index) in TYPE_OF_PAYMENT" :key="index" class="flex items-center">
            <u-image :src="item.image" height="30" width="30" />
            <u-radio
              :customStyle="{ padding: '10px', flex: 1 }"
              :label="item.name"
              :name="item.status"
              class="flex-1"
            />
          </view>
        </u-radio-group>
      </MyCard>
      <!--注释-->
      <view class="pay-desk">
        <view>
          合计
          <text class="text-red-500">{{ activitiesPrice }}</text>
        </view>
        <u-button :custom-style="{ width: '180rpx' }" shape="circle" type="primary" @click="payment">确认支付</u-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useActivtiesStore } from '@/stores/activties';
import { getPicture } from '@/utils/common';
import { RequestInterface } from '@/typings/request';
import { onReady } from '@dcloudio/uni-app';
import { formattedDate } from '@/utils/date';
import { PLAY } from '@/api/play';
import { TYPE_OF_PAYMENT } from '@/constants/base';
import MyCard from '@/components/MyCard/MyCard.vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const { user } = storeToRefs(userStore);
const $http: RequestInterface = inject('$http') as RequestInterface;

const activtiesStore = useActivtiesStore();
const { activityDetails, orderNo, activitiesPrice, activityModify } = storeToRefs(activtiesStore);

// 查询项目详情
const getOrderInfo = () => {
  console.log(1111);
};

// 选择支付
const paymentNum = ref(0);

// 开始支付
const payment = () => {
  if (paymentNum.value !== 0) {
    uni.$u.toast('暂不支持，请使用微信支付');
    return;
  }

  $http.get({
    url: `${PLAY.WECHAT_XCX_PLAY}${orderNo.value}`,
    success: (res) => {
      const sussess = () => {
        uni.$u.toast('支付成功');
        uni.$u.route({
          type: 'reLaunch',
          url: '/pages/order/index'
        });

        // 清空上一次数据
        activtiesStore.setPrice('');
        activtiesStore.setOrderNo('');
      };

      if (res === null) {
        sussess();
      } else {
        uni.requestPayment({
          orderInfo: '',
          provider: 'wxpay',
          timeStamp: res.timeStamp,
          nonceStr: res.nonceStr,
          package: res.prepayId,
          signType: res.signType,
          paySign: res.paySign,
          success: sussess,
          fail: () => {
            uni.$u.toast('支付失败，请重新支付');
          }
        });
      }
    }
  });
};

// 新增观影人
const routerPath = () => {
  uni.$u.route({
    url: '/pages/my/addMoviegoer'
  });
};
onReady(() => {
  getOrderInfo();
});
</script>

<style lang="scss" scoped>
.pay-desk {
  @apply h-20 font-bold bg-white flex items-center justify-between p-5 fixed bottom-0 left-0 w-full shadow-neutral-600 shadow-2xl;
}

.mt-13 {
  margin-top: 26rpx;
}

.ml-3 {
  margin-left: 6rpx;
}

.mt-17 {
  margin-top: 34rpx;
}

.ml-11 {
  margin-left: 22rpx;
}

.ml-5 {
  margin-left: 10rpx;
}

.page {
  background-color: #ffffff;
  width: 100%;
  overflow: auto;
  height: calc(100vh - 163rpx);

  .group_5 {
    overflow-y: auto;

    .group {
      padding: 20rpx 40rpx;

      .image_3 {
        border-radius: 8rpx;
        width: 144rpx;
        height: 200rpx;
      }

      .font_4 {
        font-size: 24rpx;
        font-family: 萍方-简;
        line-height: 22.12rpx;
        color: #696975;
      }

      .text_4 {
        margin-top: 172rpx;
        line-height: 22.56rpx;
      }

      .group_6 {
        margin-top: 68rpx;

        .text_5 {
          line-height: 22.66rpx;
        }

        .text_6 {
          color: #ff4852;
          line-height: 22.18rpx;
        }

        .section {
          margin-right: 8rpx;
          background-color: #ffffff;
          border-radius: 8rpx;
          width: 40rpx;
          height: 40rpx;
          border-left: solid 2rpx #e2e2eb;
          border-right: solid 2rpx #e2e2eb;
          border-top: solid 2rpx #e2e2eb;
          border-bottom: solid 2rpx #e2e2eb;
        }
      }

      .group_7 {
        margin-top: 44rpx;
        padding: 44rpx 0;
        border-top: solid 2rpx #e2e2eb;
        border-bottom: solid 2rpx #e2e2eb;

        .text_7 {
          line-height: 22.56rpx;
        }

        .text_8 {
          line-height: 25.74rpx;
        }

        .text_9 {
          color: #696975;
          word-break: break-all;
        }
      }

      .font_7 {
        font-size: 28rpx;
        font-family: PingFang;
        line-height: 25.82rpx;
        font-weight: 800;
        color: #171726;
      }

      .group_8 {
        margin-top: 44rpx;

        .text_10 {
          line-height: 22.36rpx;
        }

        .text_11 {
          color: #0064ff;
          font-size: 28rpx;
          font-family: PingFang;
          font-weight: 800;
          line-height: 20.46rpx;
        }

        .image_4 {
          width: 20rpx;
          height: 12rpx;
        }

        .text_12 {
          line-height: 20.46rpx;
        }
      }

      .group_9 {
        margin-top: 112rpx;
        padding-top: 40rpx;
        border-top: solid 2rpx #e2e2eb;

        .image_5 {
          width: 48rpx;
          height: 48rpx;
        }

        .font_8 {
          font-size: 28rpx;
          font-family: 萍方-简;
          line-height: 25.82rpx;
          color: #171726;
        }

        .text_13 {
          line-height: 26.34rpx;
        }

        .image_6 {
          width: 32rpx;
          height: 32rpx;
        }

        .text_14 {
          line-height: 26.26rpx;
        }

        .section_2 {
          background-color: #ffffff;
          border-radius: 50%;
          width: 32rpx;
          height: 32rpx;
          border-left: solid 2rpx #e2e2eb;
          border-right: solid 2rpx #e2e2eb;
          border-top: solid 2rpx #e2e2eb;
          border-bottom: solid 2rpx #e2e2eb;
        }

        .text_15 {
          line-height: 26.2rpx;
        }
      }
    }

    .group_10 {
      padding: 26rpx 40rpx;
      border-top: solid 2rpx #e2e2eb;

      .text_17 {
        line-height: 22.34rpx;
      }

      .image_7 {
        margin-left: 4rpx;
        width: 14rpx;
        height: 16rpx;
      }

      .font {
        font-size: 36rpx;
        font-family: 萍方-简;
      }

      .text_16 {
        margin-left: 12rpx;
        color: #ff4852;
        line-height: 26.72rpx;
      }

      .text_19 {
        margin-left: -8rpx;
        color: #ff4852;
        font-size: 16rpx;
        font-family: 萍方-简;
        line-height: 11.88rpx;
      }

      .text-wrapper {
        padding: 28rpx 0;
        background-color: #0064ff;
        border-radius: 40rpx;
        width: 240rpx;
        height: 80rpx;

        .text_18 {
          color: #ffffff;
          line-height: 22.16rpx;
        }
      }
    }

    .font_5 {
      font-size: 24rpx;
      font-family: 萍方-简;
      line-height: 22.12rpx;
      color: #171726;
    }

    .font_6 {
      font-size: 24rpx;
      font-weight: 300;
    }
  }
}
</style>
